<template>
  <div class="analysis-domain-log-table">
    <Table
      ref="analysisDomianLogTable"
      :loading="loading"
      :columns="columns"
      :data="list"
      :disabled-hover="true"
      stripe
    >
      <template slot="status" slot-scope="{ row }">
        {{ row.status | statusFilter }}
      </template>
    </Table>
    <div class="form-page-bottom-area flx-row-e-c">
      <Page
        :total="pageData.total"
        :current="pageData.page"
        :page-size="pageData.limit"
        :page-size-opts="pageData.pageSizeOpts"
        show-elevator
        show-sizer
        show-total
        @on-change="pageChange"
        @on-page-size-change="pageSizeChange"
      />
    </div>
  </div>
</template>
<script>
export default {
  name: "ReleaseRecordTable",
  filters: {
    statusFilter(val) {
      let title = "--";
      switch (val) {
        case 0:
          title = "未处理";
          break;
        case 1:
          title = "预订中";
          break;
        case 2:
          title = "竞价中";
          break;
        case 3:
          title = "支付尾款中";
          break;
        case 4:
          title = "已支付";
          break;
        case 5:
          title = "已过户";
          break;
        case 6:
          title = "买家违约";
          break;
        case 7:
          title = "流标";
          break;
      }
      return title;
    },
  },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    total: {
      type: Number,
      default: 0,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    pageData: {
      type: Object,
      default: () => {
        return {
          total: 0,
          page: 1,
          limit: 10,
          pageSizeOpts: [10, 15, 20],
        };
      },
    },
    type: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      columns: [
        {
          title: "域名",
          key: "domainName",
          align: "center",
        },
        {
          title: "创建时间",
          key: "createdTime",
          align: "center",
        },
        {
          title: "",
          key: "",
          align: "center",
        },
        {
          title: "保留价",
          key: "retentionPrice",
          align: "center",
        },
        {
          title: "状态",
          slot: "status",
          align: "center",
        },
      ],
    };
  },
  watch: {
    type: {
      immediate: true,
      handler(val) {
        let title = "开始结束时间";
        let key = "--";
        switch (val) {
          case 0:
            title = "创建结束时间";
            key = "biddingEndTime";
            break;
          case 1:
            title = "成交结束时间";
            key = "tradeTime";
            break;
          case 2:
            title = "流标结束时间";
            key = "failTime";
            break;
        }
        this.columns[2].title = title;
        this.columns[2].key = key;
        const hasIndex = this.columns.findIndex((o) => o.key === "curPrice");
        if (val === 1 && hasIndex === -1) {
          this.columns.splice(4, 0, {
            title: "最终价",
            key: "curPrice",
            align: "center",
          });
        } else if (val !== 1 && hasIndex !== -1) {
          this.columns.splice(hasIndex, 1);
        }
      },
    },
  },
  methods: {
    pageChange(val) {
      this.$emit("pageChange", val);
    },
    pageSizeChange(val) {
      this.$emit("pageSizeChange", val);
    },
  },
};
</script>
<style lang="scss" scoped>
.analysis-domain-log-table /deep/ {
  .form-page-bottom-area {
    border: none;
  }
  .ivu-table-wrapper {
    .ivu-table-cell {
      &:nth-child(1) {
        padding-left: 10px;
        padding-right: 10px;
      }
    }
    .ivu-table-header {
      border-top: 1px solid #e8eaec;
      border-left: 1px solid #e8eaec;
      border-right: 1px solid #e8eaec;
    }
    .ivu-table-row {
      border-left: 1px solid #e8eaec;
      border-right: 1px solid #e8eaec;
      &:hover {
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
        // border-color: transparent;
        transform: scale(1.01);
      }
    }
  }
}
</style>
